<template>
  <div class="pagination" v-show="totalPage>1">
    <!-- 上 -->
    <button :disabled="pageNo === 1" @click="$emit('getPageNo', pageNo - 1)">
      上一页
    </button>
    <button
      v-if="startNumAndEndNum.start > 1"
      @click="$emit('getPageNo', 1)"
      :class="{ active: pageNo === 1 }"
    >
      1
    </button>
    <button v-if="startNumAndEndNum.start > 2">···</button>
    <!-- 中间部分 -->
    <button
      v-for="(page, index) in startNumAndEndNum.end"
      :key="index"
      v-if="page >= startNumAndEndNum.start"
      @click="$emit('getPageNo', page)"
      :class="{ active: pageNo === page }"
    >
      {{ page }}
    </button>

    <!-- 下 -->
    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
    <button
      v-if="startNumAndEndNum.end < totalPage"
      @click="$emit('getPageNo', totalPage)"
      :class="{active:pageNo===totalPage}"
    >
      {{ totalPage }}
    </button>
    <button
      :disabled="pageNo === totalPage"
      @click="$emit('getPageNo', pageNo + 1)"
    >
      下一页
    </button>

    <button style="margin-left: 2vw">共 {{ total }} 条</button>
  </div>
</template>

<script>
export default {
  name:'pager',
  // 第几页  每页数  总数  连续数
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
  //总共多少页
  totalPage() {
    //向上取整
    return Math.ceil(this.total / this.pageSize);
  },

  //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
  startNumAndEndNum() {
    const { continues, pageNo, totalPage } = this;
    //先定义两个变量存储起始数字与结束数字
    let start = 0, end = 0;
    //不正常现象【总页数没有连续页码多】
    if (continues > totalPage) {
      start = 1;
      end = totalPage;
    } else {
      //正常现象【连续页码5，但是你的总页数一定是大于5的】
      start = pageNo - parseInt(continues / 2);
      end = pageNo + parseInt(continues / 2);
      //把出现不正常的现象【start数字出现0|负数】纠正
      if (start < 1) {
        start = 1;
        end = continues;
      }
      //把出现不正常的现象[end数字大于总页码]纠正
      if (end > totalPage) {
        end = totalPage;
        start = totalPage - continues + 1;
      }
    }
    return { start, end };
  },
},
};
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-bottom: 5vh;
}
.pagination button {
  margin: 0 0.3vw;
  background-color: #f4f4f5;
  color: #606266;
  outline: none;
  border-radius: 2px;
  padding: 0.5vh 0.2vw;
  vertical-align: top;
  display: inline-block;
  font-size: 1vw;
  min-width: 2vw;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  border: 0;
}
.pagination button[disabled] {
  color: #c0c4cc;
  cursor: not-allowed;
}
.pagination button.active {
  cursor: not-allowed;
  background-color: #409eff;
  color: #fff;
}
.active {
  background: skyblue;
}

</style>
